<template>
  <div class="bk">
    <swiper :options="swiperOptions" class="swiper">
      <swiper-slide v-for="(item,index) in imgs" :key="index" class="swiper-slide">
        <!-- :src="item.image" 前面加：代表值是一个动态的值，不是固定值-->
        <img :src="item.imgUrl" alt="" class="img">
      </swiper-slide>
    </swiper>
    <!-- 注：导航等组件可以放在container之外。很重要的一句话！ -->
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

</template>

<script>
  import { Swiper, SwiperSlide } from "vue-awesome-swiper"
  // import "swiper/swiper-bundle.css"
  import 'swiper/css/swiper.css'
  export default {
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        imgs: [
          { imgUrl: require('../assets/images/topbar/1.jpg'), },
          { imgUrl: require('../assets/images/topbar/2.jpg'), },
          // { imgUrl: require('../assets/images/topbar/c9.jpg'), },
          // { imgUrl: require('../assets/images/topbar/4.jpg'), },
          { imgUrl: require('../assets/images/topbar/5.jpg'), },
          { imgUrl: require('../assets/images/topbar/6.jpg'), },
          
        ],
        swiperOptions: {
          // 开启循环模式
          loop: true,
          speed: 2000,
          navigation: {
            prevEl: '.swiper-button-prev', // 后退按钮的css选择器或HTML元素。
            nextEl: '.swiper-button-next', // 前进按钮的css选择器或HTML元素。
            hideOnClick: true,
          },
          autoplay: {
            delay: 2500,
            disableOnInteraction: false // 当用户滑动图片后继续自动轮播
          }

        }
      }
    },
    // 把资源注入引用的组件里使用

    computed: {

    },
    mounted() {
      // console.log(this.imgs);
    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .swiper-button-prev,
  .swiper-button-next {
    color: rgba(145, 12, 130, 0.963);
    align-items: center;
    top:40%;
  }

  .swiper {
    height: 10%;
    width: 100%;
  }

  .swiper-slide {
    height: 600px;
    /* width: 10%;
       background-size: cover; */
  }

  .bk {
    width: 100%;
  }

  .img {
   display: flex;
    height: 100%;
    width: 100%;
  }

  *{
      margin: 0;
      padding: 0;
    }

    .swiper{
      height: 10%;
      width: 100%;
    }

    .swiper-slide{
      height: 42rem;
      /* // width: 10%; */
      /* // background-size: cover; */
    }

    .bk{
      width: 100%;
    }

    .img{
      width: 100%;
      height: 100%
    }

    @media screen and (max-width:768px){
            /* 手机屏幕 */
      .swiper-slide{
        height: 15rem;
      } 
      .swiper-button-prev,
      .swiper-button-next {
        top:18%;
      }
      
    }
    @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */
    .swiper-slide{
        height: 25rem;
      } 
      .swiper-button-prev,
      .swiper-button-next {
        top:18%;
      }
    }
</style>
<!-- <style>
  .swiper-button-prev,
  .swiper-button-next {
    color: rgba(145, 12, 130, 0.963);
    align-items: center;
    top:40%;
  }
</style> -->